<template>
  <section class="login-box">
    <el-row class="logo-nav" type="flex" align="middle">
      <div class="logo-box">
        <img src="../../assets/img/logo.jpg" alt="" class="logo">
        <span>智慧缴费平台</span>
        <router-link :to="{name: 'login'}" class="login-title">登录</router-link>
      </div>
    </el-row>
    <el-row class="login-forget">
      <h3 class="f-title">修改密码</h3>
      <el-form ref="loginForm1" class="demo-ruleForm">
        <el-steps :space="300" :active="active" class="steps" align-center finish-status="success">
          <el-step title="安全验证"></el-step>
          <el-step title="重置密码"></el-step>
        </el-steps>
        <div class="propmt">
          <el-form-item>
            <i class="el-icon-self-jingtanhao"></i>
            <span class="p-info" v-if="active === 1">为了您的账户安全，请完成身份验证</span>
            <span class="p-info" v-else>您现在修改的账号是：{{username}}</span>
          </el-form-item>
          <div v-if="active === 1">
            <el-form-item class="input-name">
              <i class="el-icon-self-shouji"></i>
              <input type="text" v-model="username" auto-complete="off" placeholder="请输入您的手机号" class="input-t">
            </el-form-item>
            <div class="err-info" v-show="showErr">请输入正确的手机号</div>
            <el-form-item class="input-name clearfix">
              <i class="el-icon-self-mima"></i>
              <input type="number" v-model="checkCode" placeholder="请输入验证码" class="input-t">
              <span class="send-code pointer" @click="sendCode">{{hasCode ? count : '获取验证码'}}</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btn-ok" :disabled="!checkCode || !username" @click="next">下一步</el-button>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item class="input-name">
              <i class="el-icon-self-mima"></i>
              <input type="password" v-model="firstPass" placeholder="请输入新密码" class="input-t">
            </el-form-item>
            <el-form-item class="input-name">
              <i class="el-icon-self-mima"></i>
              <input type="password" v-model="secondPass" placeholder="再次输入新密码" class="input-t">
            </el-form-item>
            <div class="err-info" v-show="showErr">两次输入密码不一致</div>
            <el-form-item>
              <el-button type="primary" class="btn-ok" :disabled="!firstPass || !secondPass" @click="submitOk">完成</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-row>
  </section>
</template>
<script>
import { getCode, checkCode, resetPassword } from 'api/login/index'
let timer = ''
export default {
  data () {
    return {
      username: '', // 用户名
      checkCode: '', // 验证码
      active: 1,
      showErr: false, // 显示错误信息
      firstPass: '', // 第一次密码
      secondPass: '', // 第二次密码
      count: 60, // 计时器时间
      hasSend: false, // 防止重复提交
      hasCode: false
    }
  },
  methods: {
    checkPhone () { // 检查手机号
      this.showErr = false
      if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username))) {
        this.showErr = true
        setTimeout(() => {
          this.showErr = false
        }, 3000)
        return true
      }
      return false
    },
    sendCode () { // 发送验证码
      if (this.checkPhone()) return
      if (this.hasSend) return
      this.hasSend = true
      getCode({
        username: this.username
      }).then(res => {
        this.hasCode = true
        timer = setInterval(() => {
          if (this.count === 1) {
            clearInterval(timer)
            this.count = 60
            this.hasCode = false
            this.hasSend = false
          }
          this.count--
        }, 1000)
      }).catch(res => {
        this.hasSend = false
        this.hasCode = false
      })
    },
    next () { // 下一步
      if (this.checkPhone()) return
      checkCode({
        username: this.username,
        checkCode: this.checkCode
      }).then(res => {
        this.showErr = false
        this.active = 2
      })
    },
    submitOk () { // 完成
      if (this.firstPass !== this.secondPass) {
        this.showErr = true
        return
      }
      resetPassword({
        username: this.username,
        checkCode: this.checkCode,
        password: this.firstPass
      }).then(res => {
        this.$router.push({name: 'login'})
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .logo-nav {
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    background: #447ed9;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    .logo-box {
      position: relative;
      left: -100px;
      width: 600px;
      margin: 0 auto;
    }
    .login-title {
      position: relative;
      left: 600px;
      font-size: 14px;
      font-weight: normal;
      color: #fff;
    }
    .logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 18px;
    }
  }
  .login-forget {
    width: 600px;
    box-sizing: border-box;
    margin: 76px auto 0;
    .f-title {
      width: 100%;
      font-weight: normal;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }
    .steps {
      margin-left: 130px;
      margin-top: 30px
    }
    .propmt {
      width: 465px;
      margin: 20px auto;
      .el-icon-self-jingtanhao {
        font-size: 18px;
        color: #5388dc;
      }
      .el-icon-self-shouji, .el-icon-self-mima {
        font-size: 24px;
        color: #ccc;
      }
      .input-name {
        border-bottom: 1px solid #ccc;
        margin: 30px 0 10px;
        padding-bottom: 10px
      }
      .input-t {
        font-size: 14px;
        width: 300px;
      }
      .p-info {
        font-size:12px;
        color: #666;
        margin-bottom: 20px;
      }
      .send-code {
        font-size: 14px;
        color: #447ed9;
        float: right;
        width: 126px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-left: 1px solid #ccc;
      }
      .btn-ok {
        display: block;
        width: 80%;
        margin: 30px auto;
      }
      .err-info {
        color: #ff4949;
        font-size: 12px;
      }
    }
  }
}
</style>

